<template>
  <div class="tag-list">
    <el-tag :effect="effect[item.id]"
            :size="'large'"
            style="margin-left: 5px"
            v-for="item in categoryList.list"
            :type="color[(item.id)%5]"
            @click="selectTag(item)">
      {{ item.name }}
    </el-tag>
    <PostItem v-for=" item in categoryPageData.categoryPostList" :key="item" :post = "item" />
     <pagination
      v-show="categoryPageData.total>10"
      :total="categoryPageData.total"
      :page="categoryPageData.pageNum"
      :limit="categoryPageData.pageSize"
      @pagination="paginationRecall"
    />
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import { categoryList, categoryPageData} from "@/store/customer/inedx";
import Pagination from "@/components/3rdPart/Pagination.vue";
import PostItem from "@/components/home/PostItem.vue";
import {useRoute} from "vue-router";

const {query} = useRoute()  //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数
const effect =ref([])
const color = ref(['','success','info','warning','danger'])

onMounted(() => {
  effect.value[categoryPageData.categoryId] ='dark'
  if(query.id !=null||query.id !=undefined){
    selectTag(query);
  }
})
function selectTag(item:any){
  effect.value[categoryPageData.categoryId] = 'light';
  effect.value[item.id] = 'dark'
  categoryPageData.getList(categoryPageData.pageNum,categoryPageData.pageSize,item.id)
  console.log(categoryPageData.categoryPostList)
}

function paginationRecall(val:any){
  categoryPageData.getList(val.page,val.limit,categoryPageData.categoryId);
}
</script>